class ImgPainter {
  constructor() {
    this.mouseEventHandler = new MouseEventHandler();
    this.img = new Image();
    this.width = 0;
    this.height = 0;
    this.posHandler = null;
    this.imgSprite = null;
  }
  init() {
    this.canvas = document.getElementById('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.canvasContainer = document.getElementById('canvas-container');
    this.rotateLeftBtn = document.getElementById('rotate-left-btn');
    this.rotateRightBtn = document.getElementById('rotate-right-btn');
    this.bindEvents();
    this.handleRepaint(true);
    return this;
  }

  bindEvents() {
    this.img.addEventListener('load', this.handleImgLoad);
    window.addEventListener('resize', Utils.debounce(this.handleRepaint));
    this.canvas.addEventListener('mousedown', this.handleMouseDown);
    this.canvas.addEventListener('mouseup', this.handleFinishMove);
    this.canvas.addEventListener('mouseleave', this.handleFinishMove);
    this.canvas.addEventListener('mousemove', Utils.throttle(this.handleMouseMove));
    this.canvas.addEventListener('mousewheel', Utils.throttle(this.handleMousewheel, 20));
    this.rotateRightBtn.addEventListener('click', this.handleRotateRight);
    this.rotateLeftBtn.addEventListener('click', this.handleRotateLeft);
    return this;
  }


  /**
   * 放大
   **/
  handleScaleLarge = (mousePos) => {
    this.posHandler.doScale(0.2, mousePos);
    this.doPaint();
  };

  /**
   * 缩小
   **/
  handleScaleSmall = (mousePos) => {
    this.posHandler.doScale(-0.2, mousePos);
    this.doPaint();
  };

  /**
   * 向左旋转
   **/
  handleRotateLeft = () => {
    this.posHandler.rotateByDegree(-90);
    this.doPaint();
  };

  /**
   * 向右旋转
   **/
  handleRotateRight = () => {
    this.posHandler.rotateByDegree(90);
    this.doPaint();
  };

  handleMousewheel = (e) => {
    const mousePos = {
      left: e.offsetX,
      top: e.offsetY
    };
    if( e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0){
      this.handleScaleSmall(mousePos);
    }else{
      this.handleScaleLarge(mousePos);
    }
    e.preventDefault();
  };

  handleMouseDown = (e) => {
    if (e.button !== 0 ) return;
    this.mouseEventHandler.pos = {
      left: e.offsetX,
      top: e.offsetY
    };
  };

  handleFinishMove = () => {
    if (!this.mouseEventHandler.mouseDown) return;
    this.mouseEventHandler.reset();
    this.posHandler.limitPos();
    this.doPaint();
  };

  /**
   * 鼠标移动则重绘图像
   * @param e
   */
  handleMouseMove = (e) => {
    if (!this.mouseEventHandler.mouseDown) return;
    this.mouseEventHandler.newPos = {
      left: e.offsetX,
      top: e.offsetY
    };
    this.posHandler.move(this.mouseEventHandler.diff);
    this.doPaint();
    this.mouseEventHandler.afterMove();
  };

  handleRepaint = (event) => {
    if (event) {
      this.width = this.canvasContainer.clientWidth;
      this.height = this.canvasContainer.clientHeight;
      this.canvas.width = this.width;
      this.canvas.height = this.height;
    }
    this.imgSprite = new ImgSprite({
      width: this.width,
      height: this.height,
      img: this.img
    });
    this.posHandler = new PosHandler(this.imgSprite);
    this.doPaint();
  };

  handleImgLoad = () => {
    this.handleRepaint();
  };

  paint(imgSrc) {
    this.img.src = imgSrc;
  }

  /**
   * 执行绘画
   * @private
   */
  doPaint() {
    this.imgSprite.paint(this.ctx);
  }

}

